<template >
  <div >
    <el-container class="menu-container" style="overflow: hidden;position:relative;z-index:5 ">
      <el-header >
        <el-menu mode="horizontal" text-color="#000"
                 active-text-color="#fff"
                 default-active="1"
                 style="background-color:pink;height: 65px;width: 100%;position: fixed;left:0;
          ">
          <div class="menu-items-and-search">
            <img src="/imgs/666.png" style="width: 160px;height: 100px;position: relative;bottom:2px;left:170px">
            <el-menu-item index="1" style="font-size: 23px;position: relative;left:160px"
                          @click="Home">首页</el-menu-item>
            <el-menu-item index="2" style="font-size: 23px;position: relative;left:162px">推荐</el-menu-item>
            <el-menu-item index="3" style="font-size: 23px;position: relative;left:164px"
                          @click="Follow">关注</el-menu-item>
            <el-menu-item index="4" style="font-size: 23px;position: relative;left:166px">热榜</el-menu-item>
            <el-menu-item index="5" style="font-size: 23px;position: relative;left:168px"
                          @click="checkArticle">文章</el-menu-item>
            <el-menu-item index="6" style="font-size: 23px;position: relative;left:170px"
                          @click="checkQuestion">问题</el-menu-item>
            <input type="text" placeholder="搜索" style="position: relative;left: 180px;width: 300px;
            height: 35px;border-radius: 10px;border: 1px solid #000;background-color: #fff;font-size: 16px;padding-left: 10px;">
            <el-button type="primary" style="position: relative;left: 190px;top: 2px;width: 70px;height: 35px;
            border-radius: 100px;font-size: 16px;">提问</el-button>
            <el-menu-item index="7" style="position: relative;font-size: 16px;left:200px">私信</el-menu-item>
            <el-menu-item index="8" style="position: relative;font-size: 16px;left:205px">消息</el-menu-item>
            <el-menu-item index="9" style="position: relative;font-size: 16px;left:210px"
                          @click="my">我的</el-menu-item>
            <el-form>
              <el-select
                  v-model="value"
                  placeholder="全部地区"
                  size="large"
                  style="width: 120px ;position: relative;left: 230px;"
                  @change="handleOptionSelect"
              >
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"

                />
              </el-select>
            </el-form>
          </div>
        </el-menu>
      </el-header>
    </el-container>
    <el-container style="width: 1000px;height:1500px;margin: 0 auto;">
      <el-main style="background-color:papayawhip;padding: 64px 0 0 0;
          ">

        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="black"
            text-color="white"
            active-text-color="#ffd04b"
            style="position: fixed;left:343px;top:64px;width: 697px;z-index: 1"
            default-active="0-1"

        >
          <el-sub-menu index="0">
            <template #title>主页</template>
            <el-menu-item index="0-1"  @click="Home1">不限</el-menu-item>
            <el-menu-item index="0-2"  >推荐</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="1">
            <template #title>电影</template>
            <el-menu-item index="1-1"  @click="searchByCategory(1)">不限</el-menu-item>
            <el-menu-item index="1-2"  @click="searchBySubcategory(1,101)">爱情</el-menu-item>
            <el-menu-item index="1-3"  @click="searchBySubcategory(1,102)">科幻</el-menu-item>
            <el-menu-item index="1-4"  @click="searchBySubcategory(1,103)">动作</el-menu-item>
            <el-menu-item index="1-5"  @click="searchBySubcategory(1,104)">喜剧</el-menu-item>
            <el-menu-item index="1-6"  @click="searchBySubcategory(1,105)">悬疑</el-menu-item>
            <el-menu-item index="1-7"  @click="searchBySubcategory(1,106)">恐怖</el-menu-item>
            <el-menu-item index="1-8"  @click="searchBySubcategory(1,107)">战争</el-menu-item>
            <el-menu-item index="1-9"  @click="searchBySubcategory(1,108)">其他</el-menu-item>


          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>电视剧</template>
            <el-menu-item index="2-1"  @click="searchByCategory(2)">不限</el-menu-item>
            <el-menu-item index="2-2"  @click="searchBySubcategory(2,101)">爱情</el-menu-item>
            <el-menu-item index="2-3"  @click="searchBySubcategory(2,105)">悬疑</el-menu-item>
            <el-menu-item index="2-4"  @click="searchBySubcategory(2,109)">古装</el-menu-item>
            <el-menu-item index="2-5"  @click="searchBySubcategory(2,110)">家庭</el-menu-item>
            <el-menu-item index="2-6"  @click="searchBySubcategory(2,102)">科幻</el-menu-item>
            <el-menu-item index="2-7"  @click="searchBySubcategory(2,107)">战争</el-menu-item>
            <el-menu-item index="2-8"  @click="searchBySubcategory(2,103)">动作</el-menu-item>
            <el-menu-item index="2-9"  @click="searchBySubcategory(2,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>二次元</template>
            <el-menu-item index="3-1"  @click="searchByCategory(3)">不限</el-menu-item>
            <el-menu-item index="3-2"  @click="searchBySubcategory(3,111)">番剧</el-menu-item>
            <el-menu-item index="3-3"  @click="searchBySubcategory(3,112)">动画</el-menu-item>
            <el-menu-item index="3-4"  @click="searchBySubcategory(3,113)">音乐</el-menu-item>
            <el-menu-item index="3-5"  @click="searchBySubcategory(3,114)">舞蹈</el-menu-item>
            <el-menu-item index="3-6"  @click="searchBySubcategory(3,115)">cosplay</el-menu-item>
            <el-menu-item index="3-7"  @click="searchBySubcategory(3,116)">ASMR</el-menu-item>
            <el-menu-item index="3-8"  @click="searchBySubcategory(3,117)">鬼畜</el-menu-item>
            <el-menu-item index="3-9"  @click="searchBySubcategory(3,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4" >
            <template #title>游戏</template>
            <el-menu-item index="4-1"  @click="searchByCategory(4)">不限</el-menu-item>
            <el-menu-item index="4-2"  @click="searchBySubcategory(4,118)">英雄联盟</el-menu-item>
            <el-menu-item index="4-3"  @click="searchBySubcategory(4,119)">无畏契约</el-menu-item>
            <el-menu-item index="4-4"  @click="searchBySubcategory(4,120)">王者荣耀</el-menu-item>
            <el-menu-item index="4-5"  @click="searchBySubcategory(4,121)">炉石传说</el-menu-item>
            <el-menu-item index="4-6"  @click="searchBySubcategory(4,122)">和平精英</el-menu-item>
            <el-menu-item index="4-7"  @click="searchBySubcategory(4,123)">永劫无间</el-menu-item>
            <el-menu-item index="4-8"  @click="searchBySubcategory(4,124)">魔兽世界</el-menu-item>
            <el-sub-menu index="4-9">
              <template #title>单机热游</template>
              <el-menu-item index="4-4-1"  @click="searchBySubcategory(4,125)">艾尔登法环</el-menu-item>
              <el-menu-item index="4-4-2"  @click="searchBySubcategory(4,126)">黑神话悟空</el-menu-item>
              <el-menu-item index="4-4-3"  @click="searchBySubcategory(4,127)">幻兽帕鲁</el-menu-item>
              <el-menu-item index="4-4-4"  @click="searchBySubcategory(4,128)">我的世界</el-menu-item>
              <el-menu-item index="4-4-5"  @click="searchBySubcategory(4,129)">植物大战僵尸</el-menu-item>
              <el-menu-item index="4-4-6"  @click="searchBySubcategory(4,130)">饥荒</el-menu-item>
              <el-menu-item index="4-4-7"  @click="searchBySubcategory(4,131)">骑马与砍杀2</el-menu-item>
              <el-menu-item index="4-4-8"  @click="searchBySubcategory(4,132)">只狼</el-menu-item>
              <el-menu-item index="4-4-9"  @click="searchBySubcategory(4,133)">文明6</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="4-10"  @click="searchBySubcategory(4,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>书籍</template>
            <el-menu-item index="5-1"  @click="searchByCategory(5)">不限</el-menu-item>
            <el-menu-item index="5-2"  @click="searchBySubcategory(5,134)">文学</el-menu-item>
            <el-menu-item index="5-3"  @click="searchBySubcategory(5,135)">历史</el-menu-item>
            <el-menu-item index="5-4"  @click="searchBySubcategory(5,136)">成长</el-menu-item>
            <el-menu-item index="5-5"  @click="searchBySubcategory(5,101)">爱情</el-menu-item>
            <el-menu-item index="5-6"  @click="searchBySubcategory(5,137)">推理</el-menu-item>
            <el-menu-item index="5-7"  @click="searchBySubcategory(5,102)">科幻</el-menu-item>
            <el-menu-item index="5-8"  @click="searchBySubcategory(5,138)">女性</el-menu-item>
            <el-menu-item index="5-9"  @click="searchBySubcategory(5,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>编程</template>
            <el-menu-item index="6-1"  @click="searchByCategory(6)">不限</el-menu-item>
            <el-menu-item index="6-2"  @click="searchBySubcategory(6,139)">C语言</el-menu-item>
            <el-menu-item index="6-3"  @click="searchBySubcategory(6,140)">C++</el-menu-item>
            <el-menu-item index="6-4"  @click="searchBySubcategory(6,141)">JAVA</el-menu-item>
            <el-menu-item index="6-5"  @click="searchBySubcategory(6,142)">Python</el-menu-item>
            <el-menu-item index="6-6"  @click="searchBySubcategory(6,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7">
            <template #title>生活</template>
            <el-menu-item index="7-1"  @click="searchByCategory(7)">不限</el-menu-item>
            <el-menu-item index="7-2"  @click="searchBySubcategory(7,144)">穿搭</el-menu-item>
            <el-menu-item index="7-3"  @click="searchBySubcategory(7,145)">旅行</el-menu-item>
            <el-menu-item index="7-4"  @click="searchBySubcategory(7,146)">摄影</el-menu-item>
            <el-menu-item index="7-5"  @click="searchBySubcategory(7,147)">家居</el-menu-item>
            <el-menu-item index="7-6"  @click="searchBySubcategory(7,148)">搞笑</el-menu-item>
            <el-menu-item index="7-7"  @click="searchBySubcategory(7,149)">运动</el-menu-item>
            <el-menu-item index="7-8"  @click="searchBySubcategory(7,150)">职场</el-menu-item>
            <el-menu-item index="7-9"  @click="searchBySubcategory(7,143)">美食</el-menu-item>
            <el-menu-item index="7-10" @click="searchBySubcategory(7,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8">
            <template #title>体育</template>
            <el-menu-item index="8-1"  @click="searchByCategory(8)">不限</el-menu-item>
            <el-menu-item index="8-2"  @click="searchBySubcategory(8,152)">篮球</el-menu-item>
            <el-menu-item index="8-3"  @click="searchBySubcategory(8,153)">排球</el-menu-item>
            <el-menu-item index="8-4"  @click="searchBySubcategory(8,154)">乒乓球</el-menu-item>
            <el-menu-item index="8-5"  @click="searchBySubcategory(8,155)">羽毛球</el-menu-item>
            <el-menu-item index="8-6"  @click="searchBySubcategory(8,156)">网球</el-menu-item>
            <el-menu-item index="8-7"  @click="searchBySubcategory(8,157)">橄榄球</el-menu-item>
            <el-menu-item index="8-8"  @click="searchBySubcategory(8,158)">冰球</el-menu-item>
            <el-menu-item index="8-9"  @click="searchBySubcategory(8,151)">足球</el-menu-item>
            <el-menu-item index="8-10" @click="searchBySubcategory(8,108)">其他</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="9">
            <template #title>综合</template>
            <el-menu-item index="9-1"  @click="searchByCategory(9)">不限</el-menu-item>
            <el-menu-item index="9-2"  @click="searchBySubcategory(9,160)">知识</el-menu-item>
            <el-menu-item index="9-3"  @click="searchBySubcategory(9,161)">方法</el-menu-item>
            <el-menu-item index="9-4"  @click="searchBySubcategory(9,162)">闲趣</el-menu-item>
            <el-menu-item index="9-5"  @click="searchBySubcategory(9,163)">感悟</el-menu-item>
            <el-menu-item index="9-6"  @click="searchBySubcategory(9,164)">教育</el-menu-item>
            <el-menu-item index="9-7"  @click="searchBySubcategory(9,165)">财经</el-menu-item>
            <el-menu-item index="9-8"  @click="searchBySubcategory(9,166)">健康</el-menu-item>
            <el-menu-item index="9-9"  @click="searchBySubcategory(9,159)">提升</el-menu-item>
            <el-menu-item index="9-10" @click="searchBySubcategory(9,100)">杂谈</el-menu-item>
          </el-sub-menu>
        </el-menu>

        <el-card class="yuanqu-con"
                 v-for="item in repliedArr"
                 style="height: 225px;
                        width: 700px;
                        display: flex;
                        flex-wrap: nowrap;
                        max-width: 100%;
                        overflow: hidden;
                        position:relative;
                        z-index: 0;"
        >
          <h2>{{item.title}}</h2>
          <span style="color: #f3ba00">{{item.createTime}}</span>
          <div style="display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;"
          >
            {{item.content}}
          </div>
<!--          标签的显示-->
          <el-button type="info" style="position: relative;top: 17px;width: 70px;height: 20px;
            border-radius: 100px;font-size: 14px;"
          >{{ getCategoryString(item.category) }}</el-button>
          <el-button type="warning" style="position: relative;top: 17px;width: 100px;height: 20px;
            border-radius: 100px;font-size: 14px;" >{{getSubcategoryString(item.subcategory)}}</el-button>
          <el-button type="danger" style="position: relative;top: 17px;width: 70px;height: 20px;color:midnightblue;opacity: 0.7;
            border-radius: 100px;font-size: 14px;font-weight: bold" >{{getLocCategoryString(item.locCategory)}}</el-button>
          <div style="margin-top: 36px;">
            <el-button :type="item.likesStatus" :icon="Pointer" @click="change(item)"

            >点赞<span style="margin-left: 5px">{{item.likes}}</span>
            </el-button>

            <el-button :icon="ChatLineSquare" style="margin-left: 20px">评论</el-button>

            <el-button :type="item.favoritesStatus" :icon="Star" @click="change1(item)"
                       style="margin-left: 20px">
              收藏
              <span style="margin-left: 5px">
              {{item.favorites}}
            </span>
            </el-button>
            <el-button :icon="View" style="margin-left: 20px">
              浏览量
              <span style="margin-left: 5px">
              {{item.views}}
            </span>
            </el-button>
            <el-button :icon="View" style="margin-left: 20px">
              <span style="margin-left: 5px">
             查看全文
            </span>
            </el-button>
          </div>
        </el-card>
      </el-main>

      <el-aside style="position: fixed;top:65px;right:343px;">
        <el-card>
          <template #footer>快来发布属于自己的文章和问题吧！</template>
          <v-img src="../../public/imgs/personalPage/fengye.jpg"></v-img>
          <el-row style="margin-top: 10px;">
            <el-col :offset="3" :span="6">
              <el-button type="warning" text bg style="padding-right: 10px;">
                回答问题
                <el-icon size="20px" style="margin-bottom: 10px;margin-left: 5px;">
                  <ChatDotRound />
                </el-icon>
              </el-button>
            </el-col>
            <el-col :offset="3" :span="6">
              <el-button type="warning" text bg style="padding-left: 10px;"
                         @click="writeArticle">
                <el-icon size="20px" style="margin-right: 5px;">
                  <EditPen />
                </el-icon>
                写文章
              </el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card>
          <el-table :data="attentionUserArr"
                    stripe
                    style="width: 100%;height:250px;overflow: auto;"
          >
            <el-table-column prop="nickname" width="150px"></el-table-column>
            <el-table-column>
              <template #default="scope">
                <el-button @click="addFollows(scope.row.id,scope.row.nickname)">
                  + 关注
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card style="width: 300px;height: 388px;margin-left: 1px;background-color: #f4f6f9">
          <h5>帮助中心</h5>
          <el-link href="#" style="padding-right: 5px;margin-left: -13px;font-size: 13px">枫语隐私保护指引</el-link>
          <el-link href="#" style="padding-right: 5px;font-size: 13px">申请开通机构号</el-link>
          <el-link href="#" style="padding-right: 5px;font-size: 13px">联系我们</el-link>
          <h5 style="margin-top: 15px">举报中心</h5>
          <el-link href="#" style="padding-right: 5px;margin-left: -13px;font-size: 13px">涉未成年人举报</el-link>
          <el-link href="#" style="padding-right: 5px;font-size: 13px">网络谣言举报</el-link>
          <el-link href="#" style="font-size: 13px">涉企侵权举报</el-link>
          <el-button type="info" style="height: 12px;width: 10px;font-size:13px;position: relative;left: 246px;top: -25px;">更多</el-button>
          <h5 style="margin-top: -5px">关于枫语</h5>
          <el-link href="#" style="padding-right: 5px;margin-left: -13px;font-size: 13px">下载枫语</el-link>
          <el-link href="#" style="padding-right: 5px;font-size: 13px">枫语招聘</el-link>
          <el-link href="#" style="padding-right: 5px;font-size: 13px">枫语指南</el-link>
          <el-link href="#" style="font-size: 13px">枫语协议</el-link>
          <el-button type="info" style="height: 12px;width: 10px;font-size:13px;position: relative;left:15px;top: -1px;">更多</el-button>
          <hr style="margin: 20px 0">
          <p style="font-size: 13px">鲁 ICP 证 110745 号 · 鲁 ICP 备 13052560 号 - 1 · 鲁公网安备 11010802020088 号 · 鲁网文[2022]2674-081 号  · 广播电视节目制作经营许可证:（鲁）字第06591号 · 服务热线：400-919-0001 · Investor Relations · © 2024 枫语 枫言枫语有限公司版权所有 · 违法和不良信息举报：010-82716601 · 举报邮箱：jubao@fengyu.com
          </p>
        </el-card>

      </el-aside>


    </el-container>
  </div>
<!--  写文章弹窗-->
  <el-dialog title="写文章" v-model="writeArticleDialogVisible" :before-close="handleClose" style="width:1000px;padding:40px;text-align: center">
    <el-form  label-width="100px" >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="articleForm.title" placeholder="请输入标题（最多36个字）"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <el-input v-model="articleForm.content" placeholder="请输入正文" type="textarea" :rows="35"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="position: relative;right: 290px;bottom: 20px;">
         <span>已选择标签：<el-button type="info" style="width: 70px;height: 20px;
            border-radius: 100px;font-size: 14px;"
         >{{ getCategoryString(category) }}</el-button>
        <el-button type="warning" style="position: relative;width: 100px;height: 20px;
            border-radius: 100px;font-size: 14px;" >{{getSubcategoryString(currentSelection)}}</el-button>
        <el-button type="danger" style="position: relative;width: 70px;height: 20px;color:midnightblue;opacity: 0.7;
            border-radius: 100px;font-size: 14px;font-weight: bold" >{{getLocCategoryString(radio)}}</el-button>
      </span>
      </div>
      <el-button type="danger" @click="selectLocCategory" style="color:midnightblue;opacity:0.7;font-size: 14px;font-weight: bold">地区</el-button>
      <el-button type="info" @click="selectCategory1">电影</el-button>
      <el-button type="info" @click="selectCategory2">电视剧</el-button>
      <el-button type="info" @click="selectCategory3">二次元</el-button>
      <el-button type="info" @click="selectCategory4">游戏</el-button>
      <el-button type="info" @click="selectCategory5">书籍</el-button>
      <el-button type="info" @click="selectCategory6">编程</el-button>
      <el-button type="info" @click="selectCategory7">生活</el-button>
      <el-button type="info" @click="selectCategory8">体育</el-button>
      <el-button type="info" @click="selectCategory9">综合</el-button>

      <el-button @click="handleClose" >取消</el-button>
      <el-button type="primary" @click="release">发布</el-button>

    </template>
    <el-dialog v-model="locCategoryDialogVisible"  title="地区" style="width: 500px;height: 150px;position: relative;top: 450px;right: 360px">
      <el-radio-group v-model="radio">
        <el-radio :value="37">华语</el-radio>
        <el-radio :value="38">欧美</el-radio>
        <el-radio :value="39">韩国</el-radio>
        <el-radio :value="40">日本</el-radio>
        <el-radio :value="41">印度</el-radio>
        <el-radio :value="42">泰国</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible1"  title="电影" style="width: 500px;height: 150px;position: relative;top: 450px;right: 320px">
      <el-radio-group v-model="radio1">
        <el-radio :value="101">爱情</el-radio>
        <el-radio :value="102">科幻</el-radio>
        <el-radio :value="103">动作</el-radio>
        <el-radio :value="104">喜剧</el-radio>
        <el-radio :value="105">悬疑</el-radio>
        <el-radio :value="106">恐怖</el-radio>
        <el-radio :value="107">战争</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible2"  title="电视剧" style="width: 500px;height: 150px;position: relative;top: 450px;right: 240px">
      <el-radio-group v-model="radio2">
        <el-radio :value="101">爱情</el-radio>
        <el-radio :value="105">悬疑</el-radio>
        <el-radio :value="109">古装</el-radio>
        <el-radio :value="110">家庭</el-radio>
        <el-radio :value="102">科幻</el-radio>
        <el-radio :value="107">战争</el-radio>
        <el-radio :value="103">动作</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible3"  title="二次元" style="width: 500px;height: 150px;position: relative;top: 450px;right: 160px">
      <el-radio-group v-model="radio3">
        <el-radio :value="111">番剧</el-radio>
        <el-radio :value="112">动画</el-radio>
        <el-radio :value="113">音乐</el-radio>
        <el-radio :value="114">舞蹈</el-radio>
        <el-radio :value="115">cosplay</el-radio>
        <el-radio :value="116">ASMR</el-radio>
        <el-radio :value="117">鬼畜</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible4"  title="游戏" style="width: 800px;height: 150px;position: relative;top: 450px;right: 60px">
      <el-radio-group v-model="radio4">
        <el-radio :value="118">英雄联盟</el-radio>
        <el-radio :value="119">无畏契约</el-radio>
        <el-radio :value="120">王者荣耀</el-radio>
        <el-radio :value="121">炉石传说</el-radio>
        <el-radio :value="122">和平精英</el-radio>
        <el-radio :value="123">永劫无间</el-radio>
        <el-radio :value="124">魔兽世界</el-radio>
        <el-radio :value="125">艾尔登法环</el-radio>
        <el-radio :value="126">黑神话悟空</el-radio>
        <el-radio :value="127">幻兽帕鲁</el-radio>
        <el-radio :value="128">我的世界</el-radio>
        <el-radio :value="129">植物大战僵尸</el-radio>
        <el-radio :value="130">饥荒</el-radio>
        <el-radio :value="131">骑马与砍杀</el-radio>
        <el-radio :value="132">只狼</el-radio>
        <el-radio :value="133">文明6</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible5"  title="书籍" style="width: 500px;height: 150px;position: relative;top: 450px;">
      <el-radio-group v-model="radio5">
        <el-radio :value="134">文学</el-radio>
        <el-radio :value="135">历史</el-radio>
        <el-radio :value="136">成长</el-radio>
        <el-radio :value="101">爱情</el-radio>
        <el-radio :value="137">推理</el-radio>
        <el-radio :value="102">科幻</el-radio>
        <el-radio :value="138">女性</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible6"  title="编程" style="width: 500px;height: 150px;position: relative;top: 450px;left: 80px">
      <el-radio-group v-model="radio6">
        <el-radio :value="139">C语言</el-radio>
        <el-radio :value="140">C++</el-radio>
        <el-radio :value="141">Java</el-radio>
        <el-radio :value="142">Python</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible7"  title="生活" style="width: 500px;height: 150px;position: relative;top: 450px;left: 160px">
      <el-radio-group v-model="radio7">
        <el-radio :value="144">穿搭</el-radio>
        <el-radio :value="145">旅行</el-radio>
        <el-radio :value="146">摄影</el-radio>
        <el-radio :value="147">家居</el-radio>
        <el-radio :value="148">搞笑</el-radio>
        <el-radio :value="149">运动</el-radio>
        <el-radio :value="150">职场</el-radio>
        <el-radio :value="143">美食</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible8"  title="体育" style="width: 500px;height: 150px;position: relative;top: 450px;left: 240px">
      <el-radio-group v-model="radio8">
        <el-radio :value="152">篮球</el-radio>
        <el-radio :value="153">排球</el-radio>
        <el-radio :value="154">乒乓球</el-radio>
        <el-radio :value="155">羽毛球</el-radio>
        <el-radio :value="156">网球</el-radio>
        <el-radio :value="157">橄榄球</el-radio>
        <el-radio :value="158">冰球</el-radio>
        <el-radio :value="151">足球</el-radio>
        <el-radio :value="108">其他</el-radio>
      </el-radio-group>
    </el-dialog>
    <el-dialog v-model="categoryDialogVisible9"  title="综合" style="width: 500px;height: 150px;position: relative;top: 450px;left: 320px">
      <el-radio-group v-model="radio9">
        <el-radio :value="160">知识</el-radio>
        <el-radio :value="161">方法</el-radio>
        <el-radio :value="162">闲趣</el-radio>
        <el-radio :value="163">感悟</el-radio>
        <el-radio :value="164">教育</el-radio>
        <el-radio :value="165">财经</el-radio>
        <el-radio :value="166">健康</el-radio>
        <el-radio :value="159">提升</el-radio>
        <el-radio :value="100">杂谈</el-radio>
      </el-radio-group>
    </el-dialog>
  </el-dialog>
  <router-view/>
</template>

<script setup>

import {ChatLineSquare, Pointer, Star, View} from "@element-plus/icons-vue";
import {computed, onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import router from "@/router";

const radio = ref(37)
const radio1 = ref()
const radio2 = ref()
const radio3 = ref()
const radio4 = ref()
const radio5 = ref()
const radio6 = ref()
const radio7 = ref()
const radio8 = ref()
const radio9 = ref()
const value = ref('')
// 创建计算属性
const currentSelection = computed(() => {
 if (radio1.value !== '') {
    return radio1.value;
  }else if(radio2.value !== ''){
   return radio2.value;
 }else if(radio3.value !== ''){
   return radio3.value;
 }else if(radio4.value !== ''){
   return radio4.value;
 }else if(radio5.value !== ''){
   return radio5.value;
 }else if(radio6.value !== ''){
   return radio6.value;
 }else if(radio7.value !== ''){
   return radio7.value;
 }else if(radio8.value !== ''){
   return radio8.value;
 }else if(radio9.value !== ''){
   return radio9.value;
 }else {
     return null;
   }
});
const options = [
  {
    value: '10',
    label: '全部地区',
  },
  {
    value: '37',
    label: '华语',
  },
  {
    value: '38',
    label: '欧美',
  },
  {
    value: '39',
    label: '韩国',
  },
  {
    value: '40',
    label: '日本',
  },
  {
    value: '41',
    label: '印度',
  },
  {
    value: '42',
    label: '泰国',
  },
    {
      value: '108',
      label: '其他',
    }
]

const categoryMap = {
  1:'电影',
  2:'电视剧',
  3:'二次元',
  4:'游戏',
  5:'书籍',
  6:'编程',
  7:'生活',
  8:'体育',
  9:'综合',
}
const subcategoryMap = {
  37:'华语',
  38:'欧美',
  39:'韩国',
  40:'日本',
  41:'印度',
  42:'泰国',
  100:'杂谈',
  101:'爱情',
  102:'科幻',
  103:'动作',
  104:'喜剧',
  105:'悬疑',
  106:'恐怖',
  107:'战争',
  108:'其他',
  109:'古装',
  110:'家庭',
  111:'番剧',
  112:'动画',
  113:'音乐',
  114:'舞蹈',
  115:'cosplay',
  116:'ASMR',
  117:'鬼畜',
118:'英雄联盟',
  119:'无畏契约',
  120:'王者荣耀',
  121:'炉石传说',
  122:'和平精英',
  123:'永劫无间',
  124:'魔兽世界',
  125:'艾尔登法环',
  126:'黑神话悟空',
  127:'幻兽帕鲁',
  128:'我的世界',
  129:'植物大战僵尸',
  130:'饥荒',
  131:'骑马与砍杀2',
  132:'只狼',
  133:'文明6',
  134:'文学',
  135:'历史',
  136:'成长',
  137:'推理',
  138:'女性',
  139:'C语言',
  140:'C++',
  141:'Java',
  142:'Python',
  143:'美食',
  144:'穿搭',
  145:'旅行',
  146:'摄影',
  147:'家居',
  148:'搞笑',
  149:'运动',
  150:'职场',
  151:'足球',
  152:'篮球',
  153:'排球',
  154:'乒乓球',
  155:'羽毛球',
  156:'网球',
  157:'橄榄球',
  158:'冰球',
  159:'提升',
  160:'知识',
  161:'方法',
  162:'闲趣',
  163:'感悟',
  164:'教育',
  165:'财经',
  166:'健康',
}
const locCategoryMap = {
  37: '华语',
  38: '欧美',
  39: '韩国',
  40: '日本',
  41: '印度',
  42: '泰国',
  108: '其他'
}
// 点击隔离状态设定
const buttonStatus = reactive({
  button1: false,
  button2: false,
  button3: false,
});

// 切换到关注
function Follow() {
  resetAllButtons();
  if (buttonStatus.button1) return;
  buttonStatus.button1 = true;

  search.uId = user.value.id;
  search.questionId = '';
  search.status = 1;
  loadArticle();
}

// 切换到文章
function checkArticle() {
  resetAllButtons();
  if (buttonStatus.button2) return;
  buttonStatus.button2 = true;
  if(search.status!==6){
    search.status = 3;
  }
  if(search.status===6||search.status===1||search.status===3){
    search.status = 7;
  }
  search.userId = '';
  search.uId = '';
  search.questionId = 1;
  console.log(search);
  console.log(search);

  loadArticle();
}
// 切换到问题
function checkQuestion() {
  resetAllButtons();
  if (buttonStatus.button3) return;
  buttonStatus.button3 = true;

  search.userId = '';
  search.uId = '';
  search.questionId = 2;
  console.log(search);
  console.log(search);
  if(search.status!==6){
    search.status = 4;
  }
  if(search.status===6||search.status===1||search.status===4){
    search.status = 8;
  }
  loadArticle();
}

// 重置切换状态
function resetAllButtons() {
  for (const key in buttonStatus) {
    buttonStatus[key] = false;
  }
}
//进入页面就加载文章和未关注用户
onMounted(() => {
  loadArticle();
  loadUfPersonal();
})
//切换到首页
const Home = () => {
  location.reload();
}
//切换到标签主页
const Home1 = () => {
  search.questionId = '';
  search.status = '';
  search.userId = '';
  search.uId = '';
  search.category = '';
  search.subcategory = '';
  loadArticle();
}

//切换到个人界面
const my = () => {
  router.push('/article');
}
//根据标签id获取标签名称
const getCategoryString = (categoryId) => categoryMap[categoryId] || '未知类别';
const getSubcategoryString = (subcategoryID) => subcategoryMap[subcategoryID] || '未知类别';
const getLocCategoryString = (locCategoryId) => locCategoryMap[locCategoryId] || '未知类别';
const category= ref(0);
const writeArticleDialogVisible = ref(false);
const locCategoryDialogVisible = ref(false);
const categoryDialogVisible1 = ref(false);
const categoryDialogVisible2 = ref(false);
const categoryDialogVisible3 = ref(false);
const categoryDialogVisible4= ref(false);
const categoryDialogVisible5 = ref(false);
const categoryDialogVisible6 = ref(false);
const categoryDialogVisible7= ref(false);
const categoryDialogVisible8 = ref(false);
const categoryDialogVisible9 = ref(false);
const selectLocCategory = () => {
  locCategoryDialogVisible.value = true;
}
const selectCategory1 = () => {
  categoryDialogVisible1.value = true;
  category.value = 1;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory2 = () => {
  categoryDialogVisible2.value = true;
  category.value = 2;
  radio1.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory3 = () => {
  categoryDialogVisible3.value = true;
  category.value = 3;
  radio2.value='';
  radio1.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory4 = () => {
  categoryDialogVisible4.value = true;
  category.value = 4;
  radio2.value='';
  radio3.value='';
  radio1.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory5 = () => {
  categoryDialogVisible5.value = true;
  category.value = 5;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio1.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory6 = () => {
  categoryDialogVisible6.value = true;
  category.value = 6;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio1.value='';
  radio7.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory7 = () => {
  categoryDialogVisible7.value = true;
  category.value = 7;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio1.value='';
  radio8.value='';
  radio9.value='';
}
const selectCategory8 = () => {
  categoryDialogVisible8.value = true;
  category.value = 8;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio1.value='';
  radio9.value='';
}
const selectCategory9 = () => {
  categoryDialogVisible9.value = true;
  category.value = 9;
  radio2.value='';
  radio3.value='';
  radio4.value='';
  radio5.value='';
  radio6.value='';
  radio7.value='';
  radio8.value='';
  radio1.value='';
}
//获取登录用户的信息
let user1 = getUser();
const user = ref(getUser());
const handleOptionSelect = (value) => {
  // 在这里根据选中的值执行不同的逻辑
  console.log(`Selected option: ${value}`);
  // 根据 value 值判断并执行相应的操作
  switch (value) {
    case '10':
      searchByLocCategory();
      break;
    case '37':
      searchByLocCategory(37);
      break;
      case '38':
        searchByLocCategory(38);
        break;
        case '39':
          searchByLocCategory(39);
          break;
          case '40':
            searchByLocCategory(40);
            break;
            case '41':
              searchByLocCategory(41);
              break;
              case '42':
                searchByLocCategory(42);
                break;
                case '108':
                  searchByLocCategory(108);
                  break;
    default:

  }
};
//定义变量，保存文章id和用户id
let likeFavoritesStatus = {articleId:'',userId:'',likes:'',favorites:''};
//定义变量，保存文章信息
const articleForm = ref({
  userId:user.value.id,
  title:'',
  content:'',
  category:'',
  subcategory:'',
  locCategory:radio
})

//点击写文章按钮
const writeArticle = ()=>{
  writeArticleDialogVisible.value = true;
}
//关闭写文章弹窗
const handleClose = ()=>{
  if (confirm('是否关闭本窗口？')) {
    writeArticleDialogVisible.value = false;
    articleForm.value = {};
    category.value = 0;
    radio.value=37;
    radio1.value='';
    radio2.value='';
    radio3.value='';
    radio4.value='';
    radio5.value='';
    radio6.value='';
    radio7.value='';
    radio8.value='';
    radio9.value='';
  }
}
//发布文章
const release = ()=>{
  if (articleForm.value.title == ''){
    ElMessage.error('请输入文章标题');
    return;
  }
  if (articleForm.value.content == ''){
    ElMessage.error('请输入文章内容');
    return;
  }
  if (articleForm.value.title.length > 36){
    ElMessage.error('标题最多36个字');
    return;
  }
  if (articleForm.value.content.length > 10000){
    ElMessage.error('正文最多10000个字');
    return;
  }
  articleForm.value.category = category;
  articleForm.value.subcategory=currentSelection;
  if(articleForm.value.category==0 || articleForm.value.subcategory==null ){
    ElMessage.error('请选择文章标签');
    return;
  }

  let data=qs.stringify(articleForm.value);
  console.log("发布文章的参数："+data);
  axios.post(BASE_URL+'/v1/personal/article/release',data).then((response)=>{
    if (response.data.code == 2000){
      ElMessage.success('发布成功');
      writeArticleDialogVisible.value = false;
      articleForm.value.title = '';
      articleForm.value.content = '';
      loadArticle();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

//点击点赞按钮改变状态
const change = (item)=>{
  likeFavoritesStatus.articleId = item.id;
  likeFavoritesStatus.userId = user.value.id;
  likeFavoritesStatus.likes = item.likes;
  let data = qs.stringify(likeFavoritesStatus);
   console.log("删除点赞表的点赞文章的参数："+data);
  if (item.likesStatus!=''){
    console.log('文章点赞数量1=' + data);
    axios.post(BASE_URL+'/v1/personal/article/likesStatus',data).then((response)=>{
      if (response.data.code == 2000){
        item.likesStatus='';
        item.likes = item.likes - 1;
        ElMessage.success('取消点赞');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }else {
    axios.post(BASE_URL+'/v1/personal/article/likesStatus',data).then((response) => {
      console.log('文章点赞数量2=' + data);
      if (response.data.code == 2000) {
        item.likesStatus = 'primary';
        item.likes = Number(item.likes) + 1;
        ElMessage.success('已点赞');
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//点击收藏按钮改变状态
const change1 = (item) => {
  likeFavoritesStatus.articleId = item.id;
  likeFavoritesStatus.userId = user.value.id;
  likeFavoritesStatus.favorites = item.favorites;
  let data = qs.stringify(likeFavoritesStatus);
  console.log('文章点赞数量=' + data);
  if (item.favoritesStatus != '') {
    axios.post(BASE_URL + '/v1/personal/article/favoriteStatus', data).then((response) => {
      if (response.data.code == 2000) {
        item.favoritesStatus = '';
        item.favorites = item.favorites - 1;
        ElMessage.success('取消收藏');
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  } else {
    axios.post(BASE_URL + '/v1/personal/article/favoriteStatus', data).then((response) => {
      if (response.data.code == 2000) {
        item.favoritesStatus = 'primary';
        item.favorites = Number(item.favorites) + 1;
        ElMessage.success('已收藏');
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

//定义变量，保存文章数据
const repliedArr = ref([]);
//定义变量，保存查询用户发布文章的条件
let search = {uId: '', userId: '', questionId: '', status: '',category:'',subcategory:'',locCategory:''};
//定义变量，保存未关注的用户信息
const attentionUserArr = ref([]);
//加载页面就查询

//根据大标签查询文章
const searchByCategory = (category) => {
  console.log("进入大标签");
  search.questionId = '';
  search.uId = '';
  if(search.status===1){
    search.uId = user.value.id;
  }
  else if(search.status===3){
    search.questionId=1;
  }
  else if(search.status===4){
    search.questionId=2;
  }
  search.status=5;
  // search.userId = user.value.id;

  search.category = category;
  search.subcategory='';
  console.log(search);
  // search.questionId = '';
  let data = qs.stringify(search);
  axios.get(BASE_URL + '/v1/personal/article/loadArticle?' + data).then((response) => {
    if (response.data.code == 2000) {
      repliedArr.value = response.data.data;
      // console.log(repliedArr.value[0]);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  if(search.uId===user.value.id){
    search.status=1;
  }
  if(search.questionId===1){
    search.status=3;
  }
  else if(search.questionId===2){
    search.status=4;
  }
}
//根据小标签查询文章
const searchBySubcategory = (category,subcategory) => {
  console.log("进入小标签");
  search.questionId = '';
  search.uId = '';
  if(search.status===1){
    console.log("进入关注");
    search.uId = user.value.id;
  }
  else if(search.status===3){
    search.questionId=1;
  }
  else if(search.status===4){
    search.questionId=2;
  }
  search.status=5;
  // search.userId =user.value.id;

  search.category = category;
  search.subcategory = subcategory;
  console.log(search);
  // search.questionId = '';
  let data = qs.stringify(search);
  axios.get(BASE_URL + '/v1/personal/article/loadArticle?' + data).then((response) => {
    if (response.data.code == 2000) {
      repliedArr.value = response.data.data;
      // console.log(repliedArr.value[0]);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  if(search.uId===user.value.id){
    search.status=1;
  }
  if(search.questionId===1){
    search.status=3;
  }
  else if(search.questionId===2){
    search.status=4;
  }

}
//根据地区标签查询文章
const searchByLocCategory = (locCategory) => {
  console.log("进入地区标签");
  search.questionId = '';
  search.uId = '';
  if(search.status===1){
    console.log("进入关注");
    search.uId = user.value.id;
  }
  else if(search.status===7){
    search.questionId=1;
  }
  else if(search.status===8){
    search.questionId=2;
  }
  search.status=6;
  // search.userId =user.value.id;
  search.locCategory = locCategory;
  console.log(search);
  // search.questionId = '';
  let data = qs.stringify(search);
  axios.get(BASE_URL + '/v1/personal/article/loadArticle?' + data).then((response) => {
    if (response.data.code == 2000) {
      repliedArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
  if(search.uId===user.value.id){
    search.status=1;
  }
  if(search.questionId===1){
    search.status=7;
  }
  else if(search.questionId===2){
    search.status=8;
  }

}
//加载用户发布的文章
const loadArticle = () => {
   // search.uId = user.value.id;
   search.userId = user.value.id;
  // search.questionId = '';
  let data = qs.stringify(search);
  axios.get(BASE_URL + '/v1/personal/article/loadArticle?' + data).then((response) => {
    if (response.data.code == 2000) {
      repliedArr.value = response.data.data;
      // console.log(repliedArr.value[0]);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//获取未关注的用户信息
const loadUfPersonal = () => {
  let data = user.value.id
  axios.get(BASE_URL + '/v1/personal/selectUserUnFollows?id=' + data).then((response) => {
    if (response.data.code == 2000) {
      attentionUserArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

/*
* 添加关注
* */
const addFollows = (id, nickname) => {
  let data = user.value.id
  // 验证userId是否为数字
  console.log("关注用户的id=" + id);
  console.log("关注用户的昵称=" + nickname);
  console.log("用户的id=" + data);
  if (confirm('确定关注' + nickname + '吗？')) {
    axios.post(`${BASE_URL}/v1/personal/addFollows/${id}/${data}`)
        .then((response) => {
          if (response.data.code === 2000) {
            loadUfPersonal();
            loadArticle();
            ElMessage.success('关注成功！');
          } else {
            ElMessage.error(response.data.msg);
          }
        })
        .catch((error) => {
          // 处理网络错误或其他异常
          ElMessage.error('关注失败，请稍后再试！');
          console.error(error);
        });
  }
};

</script>
<style>
.menu-container {
  display: flex;
  justify-content: center;
}

.menu-items-and-search {
  display: flex;
  align-items: center;
}


</style>